<template>
	<div class="recommend">
		<div class="recommend-top">
			<p>去哪儿推荐</p>
		</div>
		<ul class="recommend-list">
			<li class="recommend-item">
				<div class="recommend-item-left">
					<p class="ticket"><span>【去哪儿精选】</span>西安兵马俑+华清宫可订长恨歌一日游 赠接机午餐</p>
					<span><img src="https://img1.qunarzz.com/piao/fusion/1804/25/792e9929973a9902.png" alt="">23:45前可订明日</span>
					<div class="labelcon">
						<span>条件退</span><span>无购物</span><span>已售25281</span>
					</div>
				</div>
				<div class="recommend-item-right">
					<p>￥<em class="price">208</em><span>起</span></p>
					<strong>查看</strong>
				</div>
			</li>
			<li class="recommend-item">
				<div class="recommend-item-left">
					<p class="ticket"><span>【去哪儿精选】</span>西安兵马俑+华清宫可订长恨歌一日游 赠接机午餐</p>
					<span><img src="https://img1.qunarzz.com/piao/fusion/1804/25/792e9929973a9902.png" alt="">23:45前可订明日</span>
					<div class="labelcon">
						<span>条件退</span><span>无购物</span><span>已售25281</span>
					</div>
				</div>
				<div class="recommend-item-right">
					<p>￥<em class="price">208</em><span>起</span></p>
					<strong>查看</strong>
				</div>
			</li>
			<li class="recommend-item">
				<div class="recommend-item-left">
					<p class="ticket"><span>【去哪儿精选】</span>西安兵马俑+华清宫可订长恨歌一日游 赠接机午餐</p>
					<span><img src="https://img1.qunarzz.com/piao/fusion/1804/25/792e9929973a9902.png" alt="">23:45前可订明日</span>
					<div class="labelcon">
						<span>条件退</span><span>无购物</span><span>已售25281</span>
					</div>
				</div>
				<div class="recommend-item-right">
					<p>￥<em class="price">208</em><span>起</span></p>
					<strong>查看</strong>
				</div>
			</li>
		</ul>
	</div>
</template>
<script>
	export default{

	}
</script>
<style scoped>
	.recommend{
		background-color: #fff;
	}
	.recommend-top p{
		height: .88rem;
	    background: #fff;
	    color: #333;
	    font-size: .32rem;
	    line-height: .88rem;
	    padding: 0 .4rem;
	    text-indent: .36rem;
	    background-image: url(../../../assets/img/good.png);
	    background-repeat: no-repeat;
	    background-size: .36rem .36rem;
	    background-position: .2rem center;
	}
	.ticket{
		margin-right: .1rem;
	    line-height: .52rem;
	    padding: 0;
	    font-size: .3rem;
	    color: #616161;
	}
	.recommend-item{
		padding: .2rem .2rem .24rem 0;
		border-top: 1px solid #dadada;
		overflow: hidden;
		display: flex;
	}
	.recommend-list{
	    margin-bottom: .2rem;
    	padding-left: .2rem;
    	overflow: hidden;
	}
	.recommend-item-left>span{
	    height: .32rem;
	    color: #616161;
	    font-size: .24rem;
	    line-height: .32rem;
	    white-space: nowrap;
	}
	.recommend-item-left{
		line-height: 0;
		float: left;
	}
	.recommend-item-right{
		float: left;
		padding: .3rem 0 .3rem .3rem;
	}
	.recommend-item-left img{
	    width: .2rem;
	    margin-right: .04rem;
    }
    .labelcon span{
	    margin-top: .08rem;
	    padding: 0 .04rem;
	    height: .32rem;
	    color: #00afc7;
	    font-size: .2rem;
	    line-height: .32rem;
	    position: relative;
	    margin-right: .1rem;
    }
    .labelcon span:before{
    	border-radius: .08rem;
    	border: 1px solid #a5e4ec;
    	content: " ";
	    overflow: hidden;
	    position: absolute;
	    top:0;
	    left:0;
	    right:0;
	    bottom:0;
    }
    .recommend-item-right p{
    	color: #ff9800;
    	font-size: .24rem;
	    line-height: .28rem;
	    text-align: center;
    }
    .recommend-item-right p span{
    	color: #9e9e9e;
   		font-size: .24rem;
    }
    .recommend-item-right strong{
    	display: block;
    	background-color: #ffab1e;
    	height: .6rem;
	    color: #fff;
	    font-size: .28rem;
	    line-height: .6rem;
	    text-align: center;
	    border-radius: .08rem;
	    width: 1.6rem;
    }
    .price{
    	margin-left: .04rem;
	    font-size: .4rem;
	    line-height: .4rem;
    }
</style>